<template>
  <div class="gl-serachForm" id="serch-card">
    <div
      v-if="isShowForm"
      :class="['gl-search-top', { 'gl-search-top-open': isOpen }]"
    >
      <div class="search-form-title">
        <slot name="search-title"></slot>
        <div class="search-button" v-if="needAdd">
          <a-button type="primary" @click="addMethods">
            <template #icon>
              <PlusOutlined />
            </template>
            {{ addBtnName }}
          </a-button>
        </div>
      </div>
      <a-divider />
      <div class="form-an-btn">
        <span
          style="width: calc(100% - 215px); display: inline-block"
          class="gl-search-form-norepat"
        >
          <a-row :gutter="[6, 12]">
            <a-col
              v-for="form in num"
              :key="`search${form}`"
              :xs="12"
              :md="12"
              :lg="8"
              :xxl="6"
            >
              <slot :name="`form_${form}`" :id="`slot${form}`"></slot>
            </a-col>
          </a-row>
        </span>
      </div>
      <span class="search-btn">
        <a-button type="primary" @click="$emit('searchTable')">搜索</a-button>
        <a-button style="margin-left: 15px" @click="$emit('resetForm')"
          >重置</a-button
        >
        <span v-show="isShowMore">
          <span class="split-line"></span>
          <span
            @click="setOpenStatu"
            :class="[
              'gl-search-open-close',
              'gl-font-color',
              { 'gl-search-open': isOpen },
              { 'gl-search-close': isOpen === false },
            ]"
          >
            {{ isOpen ? "收起" : "展开" }}更多
            <DoubleRightOutlined class="icon" />
          </span>
        </span>
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, nextTick, computed, onMounted } from "vue";
import { DoubleRightOutlined, PlusOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  components: {
    DoubleRightOutlined,
    PlusOutlined,
  },
  props: {
    //  表单数量
    num: {
      type: Number,
      default: 0,
    },
    // 是否展示搜索表单
    isShowForm: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    addBtnName: {
      type: String,
      default: "新增",
    },
    needAdd: {
      type: Boolean,
      default:  () => false,
    },
    // propTypes.bool.def(true)
  },
  setup(props, { emit }) {
    const bodyWidth = ref(0);
    // 是否为展开状态
    const isOpen = ref(false);
    // 初始动画状态
    const isAnim = ref(false);

    onMounted(async () => {
      await nextTick(() => {
        setTableHeight();
      });
      setBodyWidth();
      window.onresize = () => {
        setTableHeight();
        setBodyWidth();
      };
    });

    let isShowMore = computed(() => {
      let bodyWidth_ = bodyWidth.value + 40;

      let flag = true;
      let nums = props.num;
      let lgxl = bodyWidth_ >= 1070 && nums <= 4;
      let md = bodyWidth_ >= 992 && nums <= 3;
      let sm = bodyWidth_ >= 768 && nums <= 3;
      if (lgxl || md || sm) flag = false;
      return flag;
    });

    function setBodyWidth() {
      try {
        bodyWidth.value = (<any>(
          document.getElementsByClassName("gl-search-form-norepat")[0]
        )).offsetWidth;
      } catch (err) {}
    }
    async function setOpenStatu() {
      isOpen.value = !isOpen.value;
      isAnim.value = true;
      nextTick(() => {
        setTableHeight();
      });
    }
    //点击展开收起动态计算表格的高度
    async function setTableHeight() {
      const dom: Element | null = document.getElementById("serch-card");

      if (dom)
        await nextTick(() => {
          const el: any = dom || "";
          const secHeight: number = el.getBoundingClientRect().height;
          let height =
            document.body.offsetHeight -
            (typeof secHeight === "number" ? secHeight : 98.55);
          const tableHeight = props.isShowForm ? height - 250 : height - 240;
          console.log(tableHeight, "tableHeight");
          emit("getTableHeight", tableHeight);
        });
    }

    function addMethods() {
      emit("addMethods");
    }
    return {
      isShowMore,
      setBodyWidth,
      setOpenStatu,
      isOpen,
      addMethods,
      needAdd: props.needAdd
    };
  },
});
</script>
<style lang="scss" scoped>
@import "@/static/styles/searchForm.scss";
</style>